<template>
	<div id="shouye-box">
		<div id="publicheader">
			<div id="publicheader-back">
				<span class="iconfont icon-xiangzuo"></span>
				<span >{{fanhui}}</span>
			</div>
			
			<div id="publicheader-search">
				<input type="text" placeholder="请输入酒店" />
				<span class="iconfont icon-sousuo"></span>
			</div>	
			<router-link to='/city' id="publicheader-city">
				<span >{{nannin}}</span>
				<span class="iconfont icon-xiangxia"></span>
			</router-link>
		</div>
		
	</div>
</template>

<script>
	export default{
		name: 'publicheader',
		data(){
			return{
				fanhui: '返回',
				nannin: '南宁',
//				cityList8: []
			}
		},
/*		created(){
			this.axios.get('/guoneihotel.json')
			.then(res => {
				var citylist = res.data.data
				var cityID = []
				for (var i=0;i<citylist.length;i++) {
					cityID[cityID.length] = citylist[i].id
				}
				cityID.sort((a,b) => {return a-b})    //对城市id从新排序，为了下面拿前八id城市渲染到页面表示热门城市
				var cityNewID = []
				var cityNewList = []
				for (var j=0;j<8;j++) {
					cityNewID[cityNewID.length] = cityID[j]
					//				console.log(cityNewID)        成功拿到id前八的城市的id
					for (var a=0;a<citylist.length;a++) {
						if(cityNewID[j] === citylist[a].id){
							cityNewList[j] =citylist[a]
						}
					}
				}
				console.log(cityNewList)   // 成功拿到前八id对应的城市，怎么渲染到city组件中呢？
				this.cityList8 = cityNewList
			})
		},
		methods : {
			sendcity(cityList8){
				this.$router.push({path: '/city',query:{cityList8:this.cityList8}})
			}
		}
		*/
	}
</script>

<style>

#publicheader{width: 100%;height: 40px; display: flex;justify-content: space-around;position: fixed;top: 0;left: 0;z-index: 100;z-index: 100;}
#publicheader-back{width: 15%;height: 40px;line-height: 40px;}
#publicheader-search{width: 60%;height: 35px;margin-top: 3px;position: relative;}
#publicheader-search input{width: 100%;height: 30px;border-radius: 20px;border: 1px solid cornflowerblue;background: #F3F3F3;padding-left: 20px;margin-top: 3px;}
#publicheader-search span{position: absolute;top: 5px;right: 15px;font-size: 25px;}
#publicheader-city{width: 15%;height: 40px;line-height: 40px;}

</style>